<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  v-model="queryParams.storeId"
                  placeholder="请选择"
                  filterable
                  @change="getList"
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.stores"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <div class="timebox">
                <el-form-item label="日期时间" prop="date">
                  <timer
                    ref="timer"
                    :timer.sync="queryParams.date"
                    @query="handleQuery"
                  ></timer>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="tableBox">
      <!-- 当日合计报表 -->
      <div class="TotalDayTable">
        <div class="HeaderBox">
          <div class="solider-line"></div>
          <div class="headerTitle">当日合计报表</div>
        </div>
        <div class="TotalDayBox">
          <el-table :data="TotalDayData" stripe style="width: 100%">
            <el-table-column prop="totalCount" label="当日合计">
            </el-table-column>
            <el-table-column prop="thCount" label="美团口碑量" width="120px">
            </el-table-column>
            <el-table-column prop="newCount" label="新客量"> </el-table-column>
            <el-table-column prop="custCount" label="会员量"> </el-table-column>
            <el-table-column prop="backCount" label="回客量"> </el-table-column>
            <el-table-column prop="itemCount" label="项目量"> </el-table-column>
            <el-table-column prop="sumCount" label="当日总客量" width="100">
            </el-table-column>
            <el-table-column
              prop="rechargeMoneyTotal"
              label="当日充值总金额"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="giveMoneyTotal"
              label="当日赠送总金额"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="cardConsumeTotal" label="扣卡">
            </el-table-column>
            <el-table-column prop="wxTotal" label="微信"> </el-table-column>
            <el-table-column prop="zfbTotal" label="支付宝"> </el-table-column>
            <el-table-column prop="posTotal" label="刷卡"> </el-table-column>
            <el-table-column prop="rmbTotal" label="现金"> </el-table-column>
            <el-table-column prop="mtTotal" label="美团收款"> </el-table-column>
            <el-table-column
              prop=""
              :label="item.cardTypeName"
              v-for="(item, index) in totalAmountObj.cardMoneyTotalVoList"
              :key="index"
            >
              <template>
                {{ item.cardMoney }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="TotalMoney">
          <div class="TotalPrice">
            当日总收入金额:
            <span class="PriceMoney">{{ totalAmountObj.incomeTotal }}</span
            ><span class="elementPirce">元</span>
          </div>
          <div>
            总扣款:
            <span class="PriceMoney">{{ totalAmountObj.cardTotal }}</span
            ><span class="elementPirce">元</span>
          </div>
        </div>
      </div>

      <!-- 技师当日合计报表 -->
      <div class="TotalDayTable">
        <div class="HeaderBox">
          <div class="solider-line"></div>
          <div class="headerTitle">技师当日合计报表</div>
        </div>
        <div class="TotalDayBox">
          <el-table :data="totalAmountArtificerList" stripe style="width: 100%">
            <el-table-column prop="name" label="技师" width="100">
            </el-table-column>
            <el-table-column prop="arrangeCount" label="排班量">
            </el-table-column>
            <el-table-column prop="addCount" label="加钟量"> </el-table-column>
            <el-table-column prop="inCount" label="点钟量"> </el-table-column>
            <el-table-column prop="overCount" label="加班量"> </el-table-column>
            <el-table-column prop="sumCount" label="今日上钟数量">
            </el-table-column>
            <el-table-column prop="headMoney" label="今日手工">
            </el-table-column>
            <el-table-column prop="rechargeMoney" label="今日充值">
            </el-table-column>
            <el-table-column prop="receiveMoney" label="待客提成">
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 前台本月截止今日合计报表 -->
      <div class="TotalDayTable">
        <div class="HeaderBox">
          <div class="solider-line"></div>
          <div class="headerTitle">前台本月截止今日合计报表</div>
        </div>
        <div class="TotalDayBox">
          <el-table
            :data="totalReceptionList"
            :key="index"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column
              prop="receiveMoney"
              label="前台本月截止今日待客总提成"
              width="240"
            >
            </el-table-column>
            <el-table-column
              prop="visitorCount"
              label="前台本月截止今日约客总数量"
            >
            </el-table-column>
            <el-table-column
              prop="visitorMoneyAward"
              label="前台本月截止今日约客总提成"
            >
            </el-table-column>
            <el-table-column
              prop="visitorMoney"
              label="前台本月截止今日约客总业绩"
            >
            </el-table-column>
            <el-table-column
              prop="rechargeMoney"
              label="前台本月截止今日充卡总计"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- <div class="table" v-loading="loading">
      <table border="1" width="1640px" height="400px" Cellspacing="0">
        <thead>
          <tr align="center">
            <td>技师</td>
            <td>排班量</td>
            <td>加钟量</td>
            <td>点钟量</td>
            <td>加班量</td>
            <td width="80px">今日上钟数量</td>
            <td>今日手工</td>
            <td>今日充值</td>
            <td>待客提成</td>

            <td width="80px">姓名</td>
            <td width="170px">前台本月截止今日待客总提成</td>
            <td width="170px">前台本月截止今日约客总数量</td>
            <td width="170px">前台本月截止今日约客总提成</td>
            <td width="170px">前台本月截止今日约客总业绩</td>
            <td width="170px">前台本月截止今日充卡总计</td>
            <td></td>
            <td></td>
            <td
              v-for="(item, index) in totalAmountObj.cardMoneyTotalVoList"
              :key="index"
            ></td>
          </tr>
          <tr v-for="(item, index) in arrs" :key="index" align="center">
            <td>{{ item.a }}</td>
            <td>{{ item.b }}</td>
            <td>{{ item.c }}</td>
            <td>{{ item.d }}</td>
            <td>{{ item.e }}</td>
            <td>{{ item.i }}</td>
            <td>{{ item.f }}</td>
            <td>{{ item.g }}</td>
            <td>{{ item.h }}</td>

            <td>{{ item.x }}</td>
            <td>{{ item.n }}</td>
            <td>{{ item.j }}</td>
            <td>{{ item.k }}</td>
            <td>{{ item.l }}</td>
            <td>{{ item.y }}</td>
            <td></td>
            <td></td>  
            <td
              v-for="(item, index) in totalAmountObj.cardMoneyTotalVoList"
              :key="index"
            ></td>
          </tr>
        </tbody>
      </table>
    </div> -->
  </div>
</template>

<script>
import { getTotalDay } from "@/api/business/order";
import timer from "@/components/getTime/timer";
// import { dayDataTime } from "@/utils/utils";
export default {
  name: "Storeadminworks",
  components: { timer },
  data() {
    return {
      totalAmountArtificerList: [],
      totalReceptionList: [],
      totalAmountObj: {
        cardMoneyTotalVoList: [],
      },
      queryParams: {
        pageNo: 1,
        pageSize: 100,
        // localDate: "", // 日期
        date: [],
        startTime: "",
        endTime: "",
      },
      loading: false,
      arrs: [],

      TotalDayData: [],
    };
  },

  created() {
    // this.resetQuery();
  },

  mounted() {},

  methods: {
    // 筛选
    handleQuery() {
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      // this.queryParams.localDate = dayDataTime("obj").str;
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      const query = JSON.parse(JSON.stringify(this.queryParams));

      if (!!query.date) {
        query.startTime = this.queryParams.date[0];
        query.endTime = this.queryParams.date[1];
        query.date = [];
      }

      getTotalDay(query)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.totalAmountArtificerList = data.totalAmountArtificerVos;
            this.totalReceptionList = data.totalReceptionVo;
            this.totalAmountObj = data.totalAmountVo;

            let newArray = [];
            newArray.push({
              totalCount: this.totalAmountObj.totalCount,
              thCount: this.totalAmountObj.thCount,

              newCount: this.totalAmountObj.newCount,
              custCount: this.totalAmountObj.custCount,
              backCount: this.totalAmountObj.backCount,
              itemCount: this.totalAmountObj.itemCount,
              sumCount: this.totalAmountObj.sumCount,

              rechargeMoneyTotal: this.totalAmountObj.rechargeMoneyTotal,

              giveMoneyTotal: this.totalAmountObj.giveMoneyTotal,
              cardConsumeTotal: this.totalAmountObj.cardConsumeTotal,
              wxTotal: this.totalAmountObj.wxTotal,

              zfbTotal: this.totalAmountObj.zfbTotal,
              posTotal: this.totalAmountObj.posTotal,

              rmbTotal: this.totalAmountObj.rmbTotal,
              mtTotal: this.totalAmountObj.mtTotal,
            });
            this.TotalDayData = newArray;

            // let len = 0;
            // if (
            //   this.totalAmountArtificerList.length >
            //   this.totalReceptionList.length
            // ) {
            //   len = this.totalAmountArtificerList.length;
            // } else {
            //   len = this.totalReceptionList.length;
            // }

            // let array = [];
            // for (let i = 0; i < len; i++) {
            //   let obj = {};
            //   let item = this.totalAmountArtificerList[i];
            //   let elItem = this.totalReceptionList[i];
            //   if (!!item) {
            //     obj.a = item.name;
            //     obj.b = item.arrangeCount;
            //     obj.c = item.addCount;
            //     obj.d = item.inCount;
            //     obj.e = item.overCount;
            //     obj.f = item.headMoney;
            //     obj.g = item.rechargeMoney;
            //     obj.h = item.receiveMoney;
            //     obj.i = item.sumCount;
            //   }
            //   if (!!elItem) {
            //     obj.x = elItem.name;
            //     obj.n = elItem.receiveMoney;
            //     obj.j = elItem.visitorCount;
            //     obj.k = elItem.visitorMoneyAward;
            //     obj.l = elItem.visitorMoney;
            //     obj.y = elItem.rechargeMoney;
            //   }
            //   array.push(obj);
            // }
            // console.log(array,"嘻嘻嘻嘻哈哈哈哈哈");
            // this.arrs = array;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tableBox {
  padding-left: 20px;
  padding-right: 20px;
  .TotalDayTable {
    width: 100%;
    padding-bottom: 23px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px #f0f4f8;
    border-radius: 15px;
    margin-bottom: 24px;

    .HeaderBox {
      padding-top: 23px;
      display: flex;
      align-items: center;

      .solider-line {
        width: 4px;
        height: 21px;
        background: #007aff;
        border-radius: 3px;
        margin-right: 10px;
      }

      .headerTitle {
        font-weight: 600;
        font-size: 14px;
        color: #000000;
      }
    }

    .TotalDayBox {
      margin-top: 20px;
    }

    .TotalMoney {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-weight: 400;
      font-size: 13px;
      color: #000000;
      padding-right: 35px;
      margin-top: 30px;

      .TotalPrice {
        margin-right: 34px;
      }
      .PriceMoney {
        font-weight: 500;
        font-size: 24px;
        color: #e6230e;
      }

      .elementPirce {
        font-weight: 400;
        font-size: 10px;
        color: #666666;
      }
    }
  }
}
</style>
